<?php $this->headScript()->appendFile($this->js('plugins/jquery.jqprint.js'))?>
<style>
#listData table {margin: 5px; background: #ccc; border-spacing: 1px; width:600px; text-align:center}
#listData table th {background: #eef;}
.even {background: #fee}
.odd {background: #ffd}
</style>
<script>
$(function(){

    getData();

    $("#grade").change(getData);

    $("#friendlyPrint").click(function(){
        $("#listData").addClass('printTable').jqprint();
      });

	function getData() {
	    var yearSemester = $("#yearSemester").val();
	    var grade = $("#grade").val();
	    $.get('<?php echo $this->route("get-data")?>',
	    	    {yearSemester: yearSemester,  grade : grade  },
	    	   function(data){
	    		$("#listData").html(data);
	    		  $("#listData table").append('<caption>'+$("#yearSemester option:selected").text()+
	    	                $("#grade option:selected").text() + '<?php echo $this->translate('semester compare list')?>'+
	    	                '</caption>');
	    		$("#listData table tbody tr:even").addClass('even');
	    		$("#listData table tbody tr:odd").addClass('odd');
	    });

	}

});
</script>
<div class="ui-widget">
<form action="" method="post" id="selectForm">
<select name="yearSemester" id="yearSemester">
<?php echo $this->YearSemesterOptions($this->yearSemester,array('order'=>'year DESC'))?>
</select>
<select name="grade" id="grade">
<?php echo $this->ClassGradeOptions($this->grade)?>
</select>
<input type="button" id="friendlyPrint" value="<?php echo $this->translate('friendly print')?>" />
</form>
<div id="listData">
</div>

</div>